<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>总价格：{{totalPrice}}</h2>
</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            books: [
                {id: '100', name: '算法原理', price: 79.4},
                {id: '101', name: '数据库', price: 89.6},
                {id: '102', name: '操作系统', price: 69.6},
                {id: '103', name: '数据结构', price: 95.8}
            ]
        },
        computed: {
            totalPrice: function(){
                let result = 0;
                /*for (let i = 0; i < this.books.length; i++) {
                    result += this.books[i].price;
                }*/

                /*for (let i in this.books) {
                    result += this.books[i].price;
                }*/

                for (let book of this.books) {
                    result += book.price;
                }

                return result;
            }
        }
    });
</script>
</body>
</html>